<!--
1. 给元素添加 ref 标签 可以将该元素收入 refs中
2. 我们可以从 refs 中取出要引用的元素
3. 组件也可以和元素一样引用
4.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getElement">获取元素</button>
        <h3 id="myH3" ref="my">Hello job!</h3>
        <login ref="myLogin"></login>
    </div>
    <script>

        var login = {
            template:'<h1>登录组件</h1>',
            data(){
                return {
                    msg:'son msg'
                }
            },
            methods:{
                show(){
                    console.log('调用了子组件的方法');
                }
            }
        };

        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{
                getElement(){
                    // console.log(document.getElementById('myH3').innerText);
                    console.log(this.$refs.my.innerText);
                    this.$refs.myLogin.show();
                    console.log("myLogin.msg="+this.$refs.myLogin.msg);
                }
            },
            components:{
                login,

            }
        })
    </script>
</body>
</html>